<template>
	<view class="login">
<!-- 	    <view class="txjl" @click="loginzhu=1" >
	        账户注册
	    </view> -->
	    <view class="txet">
	        欢迎来到畅收卡
	    </view>
	    <view class="tab" >
				<view class="tab-item " @click="loginF" :class="loginType == 'code'?'acitve':''">
					<view class="hover">
				  </view>
					<view class="dl listd">
						验证码登录
					</view>
				</view>
				<view class="tab-item"  @click="loginF" :class="loginType == 'pass'?'acitve':'' ">
					 <view class="hover">
							 
					 </view>
					 <view class="dl">
							 密码登录
					 </view>
				</view>
	    </view>
	    <view class="input-item">
				<view class="item-zhang item-form-top">
						<input type="text" placeholder="输入你的手机号" v-model="phone" />
				</view>
				<view class="item-yzm item-form-top" v-if="loginType == 'code'">
						<view class="yzm-left">
									<input type="text" placeholder="验证码" v-model="code" />
						</view>
						<view class="yzm-right " @click="getCode">
								{{time==0?'获取验证码':(time+'s后重新获取')}}
						</view>
				</view>
				<view class="item-zhang  item-form-top" v-if="loginType == 'pass'">
					<input type="password" placeholder="输入你的密码" v-model="password" />
				</view>
	    </view>
	    <view class="tyin" :class="{swing:ariseN}">
	      <view class="top">
					<image src="/static/withdraw/awal4@2x.png" v-if="yinsiSelect" @click="yinsiSelect = !yinsiSelect" mode=""></image>
					<image src="/static/withdraw/awal5@2x.png" v-if="!yinsiSelect" @click="yinsiSelect = !yinsiSelect"  mode=""></image>
	      </view>
				<view class="text">
					<view class="text-item">
							已阅读并同意
					</view>
					<view class="text-text" @click="benefits('terms')" >
							《用户条款》
					</view>
					<view class="text-item">
							和
					</view>
					<view class="text-text" @click="benefits('policy')" >
							《隐私权政策》
					</view>
	      </view>
	    </view>
	    <view class="li">
	        <!-- <image src="../../static/logindl@2x.png" mode=""></image> -->
	        <view class="logindl">
	        </view>
	        <view class="lidl" @click="postLogin">
	            立即登录
	        </view>
	    </view>
	</view>
</template>

<script>
	import * as Api from '@/api/login.js'
	import * as codeApi from '@/api/code.js'
	import * as userApi from '@/api/user.js'
	export default{
		data(){
			return{
				yinsiSelect:false,
				ariseN:false,
				loginType:'code',
				code:"",
				phone:"",
				password:"",
				time:0,
				imgimg:0,
				tabIndex:0
			}
		},
		onLoad() {

		},
		methods:{
			openRegister(){
				uni.navigateTo({
					url:'/pages/login/register'
				})
			},
			loginF(){
				this.loginType = this.loginType == "pass" ? "code" : "pass"
			},
			getCode(){
				let _this = this
				if(this.$fxLink.checkPhone(this.phone)){
					this.$toast('请输入正确的手机号')
					return
				}
				if (this.time == 0){
					codeApi.sendSmsCaptcha({
						wxapp_id: _this.$wxapp_id,
						mobile:this.phone,
					}).then(res => {
						this.$toast(res.msg)
						if(res.code === 1){
							this.time = 60 ;
							this.interval = setInterval(() => {
								if(this.time == 0){
									clearInterval(this.interval)
									return
								}
								this.time --
							},1000)
						}
			
					})
				}
			},
			postLogin(){
				let type = this.$fxLink.checkGain()
				if(!this.yinsiSelect){
					this.$toast('请先阅读并同意协议')
					this.ariseN = true
					setTimeout(() => {
						this.ariseN = false
					},500)
					return
				}
				if(!this.phone){
					this.$toast('请输入手机号')
					return
				}
				if(this.loginType === 'pass'){
					if(!this.password){
						this.$toast('请输入密码')
						return
					}
					this.loginPass(type)
				}
				if(this.loginType === 'code'){
					if(!this.code){
						this.$toast('请输入验证码')
						return
					}
					this.loginCode(type)
				}
			},
			loginPass(type){
				if(!this.password){
					this.$toast('请输入密码')
					return
				}
				Api.phonePassLogin({
					wxapp_id: this.$wxapp_id,
					phone: this.phone,
					password: this.password,
					type
				})
				.then(result => {
					if(result.code === 1){
						this.$toast("登录成功")
						uni.setStorageSync("AccessToken",result.data.token)
						setTimeout(() => {
							uni.switchTab({
								url:"/pages/my/my"
							})
						},1000)
					}else{
						this.$toast(result.msg)
					}
				})
			},
			loginCode(type){
				Api.phoneLogin({
					wxapp_id: this.$wxapp_id,
					phone: this.phone,
					code: this.code,
					type
				})
				.then(result => {
					if(result.code === 1){
						this.$toast("登录成功")
						uni.setStorageSync("AccessToken",result.data)
						setTimeout(() => {
							uni.switchTab({
								url:"/pages/my/my"
							})
						},1000)
					}else{
						this.$toast(result.msg)
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.swing {
		animation: finger infinite 0.3s
	}
	@keyframes finger {
	
		0% {
	
				transform: translate(-3px)
		}
	
		
		25% {
				transform: translate(3px)
		}
	
		
		50% {
				transform: translate(-3px)
		}
	
		
		75% {
				transform: translate(3px)
		}
	
		100% {
				transform: translate(-3px)
		}
	
	}
</style>